<template>
  <div>
    <div  v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"  element-loading-background="rgba(0, 0, 0, 0.8)" class="model-container1 model-container-box" :class="{'model-container2':is_full_screen}" id="model-container" @dblclick="fullScreen"></div>
    <el-card class="show-model" style="background-color: #3C3F41; color: #9E9F9F">
      <div slot="header" class="clearfix">
        <span style="float: left;"><strong style="font-size: 20px">3D控件展示说明<i class="header-icon el-icon-info"></i></strong></span>
        <el-button type="text" style="float: right;padding: 3px 0;margin-right: 10px" icon="el-icon-delete" @click="delModel">删除模型</el-button>
        <el-button type="text" icon="el-icon-full-screen" style="float: right; padding: 3px 0; margin-right: 10px" @click="fullScreen" :class="{'full-screen-btn':is_full_screen}">{{full_screen_btn_str}}</el-button>
        <el-button style="float: right; padding: 3px 0;margin-right: 10px" type="text" @click="sendMessage('showContourPoints')" icon="el-icon-search">展示轮廓点云</el-button>
        <el-button style="float: right; padding: 3px 0;margin-right: 10px" type="text" @click="sendMessage('show')" icon="el-icon-search">展示完整点云</el-button>

      </div>
      <p>左键拖动旋转 右键拖动移动 滚轮滑动缩放 键盘方向键平移</p>
    </el-card>
  </div>
</template>

<script>
    import * as Three from 'three'
    import OrbitControls from 'three-orbitcontrols'
    import {mapState, mapActions, mapMutations} from 'vuex'

    export default {
        name: "Show3DModel",
        data(){
            return{
                scene : new Three.Scene(),
                camera : new Three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000),
                renderer : new Three.WebGLRenderer(),
                geom : new Three.Geometry(),
                material : new Three.ParticleBasicMaterial({ color: 0x00FFFF, size: 1 }),
                color1 : new Three.Color(0x0000ff),
                p1 : new Three.Vector3(0, 0, 0),
                system : new Three.ParticleSystem(this.geom, this.material),
                controls : null ,
                light_point: null ,
                ambient: null,
                is_full_screen : false,
                model_container_class: "height: 50vh; overflow: hidden",
                full_screen_btn_str: '全屏',
                model_socket_is_connect: false,
                is_loaded: false,
            }

        },
      mounted() {
          let container = document.getElementById('model-container');
          this.renderer.setSize(window.innerWidth, window.innerHeight);
          container.appendChild(this.renderer.domElement);
          this.controls = new OrbitControls(this.camera, this.renderer.domElement);
          this.controls.addEventListener('change', this.render);
      },
      computed: {
          ...mapState([
            'ws', 'loading', 'messageContent',
          ])
      },
      created() {
          this.initWsAction()
      },
      watch: {
          messageContent: function (old, newStr) {
            if(this.messageContent !== ""){
              this.jpcLoader(this.messageContent)
              this.sleepLoadStateAction()
              this.is_loaded = true
            }
          }
      },
      methods:{
          ...mapActions([
            'initWsAction',
            'activeLoadStateAction',
            'sleepLoadStateAction',
          ]),
          ...mapMutations([
            'resetMessageContent'
          ]),
          delModel(){
            this.activeLoadStateAction()
            for(let i in this.scene.children){
              this.deleteGroup(this.scene.children[i])
              this.scene.remove(this.scene.children[i])
            }

            this.sleepLoadStateAction()
            this.render()
            this.$message({
              type: 'success',
              message: '删除成功',
              showClose: true,
            })
            this.is_loaded = false
            this.resetMessageContent()

          },
          deleteGroup(group){
            if (!group) return ;
            console.log('释放内存')
            group.traverse(function(item){
              if (item instanceof Three.Mesh) {
                item.geometry.dispose(); // 删除几何体
                item.material.dispose(); // 删除材质
              }
            })
          },
          sendMessage(message){
            if(!this.is_loaded){
              this.activeLoadStateAction()
              this.ws.send(message)
            }
          },

          render(){
            this.renderer.render(this.scene, this.camera)
          },
          fullScreen(){
            if (!this.is_full_screen){
              this.full_screen_btn_str = "退出全屏"
              this.$message({
                duration: 1000,
                showClose: true,
                message: '进入全屏'
              })
            }else{
              this.full_screen_btn_str = "全屏"
              this.$message({
                duration: 1000,
                showClose: true,
                message: '退出全屏',
              })
            }
            this.is_full_screen = !this.is_full_screen
            let el = document.getElementById('model-container').getElementsByTagName('canvas')

          },
          jpcLoader(content){
              let points = JSON.parse(content);
	            let geom = new Three.Geometry();
              let material = new Three.PointCloudMaterial({size: 1, vertexColors: true, color: 0xffffff});
	            this.camera.position.x = points[0].x ;
	            this.camera.position.y = points[0].y ;
	            this.camera.position.z = points[0].z ;

              for(let i in points){
                let rgb = "rgb(" + points[i].intensity + ',' + points[i].intensity + ',' + points[i].intensity +")"
		            let color1 = new Three.Color(rgb);
                let p1 = new Three.Vector3( points[i].x, points[i].y, points[i].z - 200);
    	          // 将粒子加入粒子geometry
    	          geom.vertices.push(p1);
    	          geom.colors.push(color1);
	              }
	              // 创建粒子系统
    	          let cloud =  new Three.PointCloud(geom, material);
    	          // 将粒子系统加入场景
                this.scene.add(cloud);
    	          this.render();
          },
      },
    }
</script>

<style scoped>
  .model-container1{
    height: 50vh;
    overflow: hidden;
  }
  .model-container2{
    position: fixed;
    top: 0;left: 0;
    z-index: 1000;
    height: 100vh;
    width:100%;
  }
  .full-screen-btn {
    position: absolute;
    z-index: 1001;
    top: 0;
    left: 10px;
    font-size: 20px;
    height: 20px;
    width: 30px ;
  }
  .show-model {
    margin: 0 auto;
    margin-top: 10px ;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .explanation{
    float: left;
    margin-bottom: 20px;
  }
  .explanation p{
    text-indent: 2em;
    padding: 0px;
    margin: 10px;
  }
  .explanation ul li {}
</style>
